<template>
  <div id="chart3" ></div>
</template>
<script>
export default {
  data() {
    return {
      time: new Date().getTime(),
      timer:''
    };
  },
  mounted() {
    this.typeRank();
  },
  methods: {
    typeRank() {
      let params = {
        time: this.time,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.dataModel.typeRank, {
          time: this.time,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.drawLine(res.data.data);
        })
        .catch(() => {});
    },
    drawLine(list) {
      let that = this;
      let myChart = this.$echarts.init(document.getElementById("chart3"));
      myChart.showLoading();
      let legendData = list.map((item) => {
        return item.typeName;
      });
      var scaleData = list.reduce((pre, cur) => {
        pre.push({
          name: cur.typeName,
          value: cur.count,
        });
        return pre;
      }, []);
      let index = 0;
      var colorList = [
        "#FD895B",
        "#FED130",
        "#27E9CB",
        "#E9802C",
        "#0B2FE7",
        "#9456FB",
        "#FC5659",
        "#73DDFF",
      ];
      function fun() {
        that.timer = setInterval(function () {
          myChart.dispatchAction({
            type: "hideTip",
            seriesIndex: 0,
            dataIndex: index,
          });
          // 显示提示框
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index,
          });
          // 取消高亮指定的数据图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index == 0 ? scaleData.length-1 : index - 1,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index,
          });
          index++;
          if (index > scaleData.length-1) {
            index = 0;
          }
        }, 3000);
      }
      fun();
      var option = {
        title: {
          text: "",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 20,
          },
        },
        // grid: {
        //   top: "35%",
        // },
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   icon: "circle",
        //   orient: "vertical",
        //   left: 30,
        //   top: "12%",
        //   itemGap: 10,
        //   data: legendData,
        //   show: true,
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        series: [
          {
            type: "pie",
           // center: ["50%", "55%"],
           center: ["50%", "60%"],
            radius: ["35%", "65%"],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{a|{b}：{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-30, 15, -20, 15],
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: scaleData,
          },
        ],
      };
      myChart.hideLoading();
      myChart.setOption(option);
      myChart.on('click',function(){
        that.$router.push("/adviceList");
      })
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>